/* stylelint-disable no-duplicate-selectors */
@use "sass:map";
@use "./mixins" as *;
@use "./vars" as *;

$c-primary: #0078e7 !default;

@use "./palette" with (
  $colors: (
    "primary": $c-primary,
  )
);
@use './css-vars/borders.css' as *;
@use './css-vars/palette.css' as *;
@use './css-vars/function.css' as *;

// common
:root {
  @include set-css-var-from-map($common);
  @include set-css-var-from-map($border, "border");
  @include set-css-var-from-map($font, "font");
  @include set-css-var-from-map($transition, "transition");
}

// colors
:root {
  // palette different with colors
  @include set-css-var-from-map(palette.$palette, "c");

  // primary
  @include set-css-var-from-map(palette.$colors, "c");
}

// light
:root {
  color-scheme: light;

  @include set-css-var-from-map(palette.$light);
}

// dark
html.dark {
  color-scheme: dark;

  @include set-css-var-from-map(palette.$dark);
}

/**
 * Colors: Text
 *
 * - `text-1`: Used for primary text.
 *
 * - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
 *
 * - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
 * -------------------------------------------------------------------------- */
:root {
  --va-c-text-1: rgba(60, 60, 67);
  --va-c-text-2: rgba(60, 60, 67, 0.78);
  --va-c-text-3: rgba(60, 60, 67, 0.56);
}

.dark {
  --va-c-text-1: rgba(255, 255, 245, 0.86);
  --va-c-text-2: rgba(235, 235, 245, 0.6);
  --va-c-text-3: rgba(235, 235, 245, 0.38);
}

// bg
:root {
  --va-c-bg: #ffffff;
  --va-c-bg-light: #ffffff;
  --va-c-bg-dark: #fafafa;
  --va-c-bg-opacity: rgba(255, 255, 255, 0.8);
  --va-c-bg-soft: #f9f9f9;
  --va-c-bg-alt: #f9f9f9;
  --va-c-bg-mute: #f1f1f1;
}

html.dark {
  --va-c-bg: #1a1a1d;
  --va-c-bg-light: #202127;
  --va-c-bg-dark: #1a1a1a;
  --va-c-bg-opacity: rgba(0, 0, 0, 0.8);
  --va-c-bg-alt: #161618;
  --va-c-bg-soft: #202127;
  --va-c-bg-mute: #2f2f2f;
}

/* code */
:root {
  --va-code-line-height: 1.7;
  --va-code-font-size: 0.875em;

  // block
  --va-code-block-color: var(--va-c-text-2);
  --va-code-block-bg: var(--va-c-bg-alt);
  --va-code-block-divider-color: var(--va-c-gutter);

  // line
  --va-code-lang-color: var(--va-c-text-3);
  --va-code-line-highlight-color: var(--va-c-default-soft);
  --va-code-line-number-color: var(--va-c-text-3);

  // diff
  --va-code-line-diff-add-color: var(--va-c-green-soft);
  --va-code-line-diff-add-symbol-color: var(--va-c-green-1);
  --va-code-line-diff-remove-color: var(--va-c-red-soft);
  --va-code-line-diff-remove-symbol-color: var(--va-c-red-1);
  --va-code-line-warning-color: var(--va-c-yellow-soft);
  --va-code-line-error-color: var(--va-c-red-soft);

  // copy
  --va-code-copy-code-border-color: var(--va-c-divider);
  --va-code-copy-code-bg: var(--va-c-bg-soft);
  --va-code-copy-code-hover-border-color: var(--va-c-divider);
  --va-code-copy-code-hover-bg: var(--va-c-bg);
  --va-code-copy-code-active-text: var(--va-c-text-2);
  --va-code-copy-copied-text-content: 'Copied';

  // code-group
  --va-code-tab-divider: var(--va-code-block-divider-color);
  --va-code-tab-text-color: var(--va-c-text-2);
  --va-code-tab-bg: var(--va-code-block-bg);
  --va-code-tab-hover-text-color: var(--va-c-text-1);
  --va-code-tab-active-text-color: var(--va-c-text-1);
  --va-code-tab-active-bar-color: var(--va-c-brand-1);
}

.dark {
  --va-code-block-bg: var(--va-c-bg-alt);
}

/* Icons */
:root {
  --va-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
  --va-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
  --va-icon-collapse: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32' stroke='rgba(128,128,128,1)' viewBox='0%200%2024%2024'%3E%3Cpath%20fill='currentColor'%20d='m12%2016.175l3.9-3.875q.275-.275.688-.288t.712.288q.275.275.275.7t-.275.7l-4.6%204.6q-.15.15-.325.213t-.375.062q-.2%200-.375-.063T11.3%2018.3l-4.6-4.6q-.275-.275-.288-.687T6.7%2012.3q.275-.275.7-.275t.7.275l3.9%203.875Zm0-6L15.9%206.3q.275-.275.688-.287t.712.287q.275.275.275.7t-.275.7l-4.6%204.6q-.15.15-.325.213t-.375.062q-.2%200-.375-.062T11.3%2012.3L6.7%207.7q-.275-.275-.288-.688T6.7%206.3q.275-.275.7-.275t.7.275l3.9%203.875Z'/%3E%3C/svg%3E")
}

/**
 * Component: Header Anchor
 * -------------------------------------------------------------------------- */

:root {
  --va-header-anchor-symbol: '#';
}
